<template>
  <div class=tab-header>
     <div class="item" v-for="(option,i) in tabList" :key="i" @click="clickTab(option,i)" :class="tabIndex === i ? 'active':'' ">
      {{option.name}}
      <div class="bottom-choice"></div>
     </div>
  </div>
</template>

<script setup lang=ts>
import { ref ,onBeforeMount } from "vue";


let tabIndex = ref(-1)

export interface tabData {
  name:string,
  value:string
}

//定义props的接口
interface Props {
  tabList: Array<tabData>,
  defaultIndex?:number
}

//withDefaults 设置props的默认值
const propsData = withDefaults(
  defineProps<Props>(),
  {
    defaultIndex:0
  }
)

const emit = defineEmits(["clickTab"])

onBeforeMount(()=>{
  tabIndex.value = propsData.defaultIndex
})


const clickTab = (data:tabData,index:number) =>{
  tabIndex.value = index
  emit('clickTab',data)
}



</script>
<style lang='less'>
.tab-header{
  font-size: 16px;
  height: 100%;
  display: flex;
  .item{
    position: relative;
    height: 100%;
    width: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover{
      color: #488CFF;
      .bottom-choice{
        display:block
      }
    }
    .bottom-choice{
      display: none;
      position: absolute;
      bottom: 0px;
      height: 19px;
      width: 100%;
      background: linear-gradient(180deg, rgba(72,140,255,0.2) 0%, rgba(126,192,255,0) 100%);
    }
    
  }
  .active{
    color: #488CFF;
    .bottom-choice{
      display: block;
    }
  }
}
</style>